<template>
	<q-search v-model="searchParams" :config="searchConfig" />
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import $dateFormat from '@q-admin-design-vue/utils/DateFormat';

	const searchForm = [
		{
			componentType: 'select',
			key: 'channelName1',
			label: '选择器：',
			options: [
				{
					value: '1',
					label: '渠道名称1',
				},
			],
		},
		{
			componentType: 'select-v2',
			key: 'channelName2',
			label: '虚拟列表选择器：',
			options: [
				{
					value: '2',
					label: '渠道名称2',
				},
			],
		},
		{
			componentType: 'checkSelect',
			selectAll: true,
			key: 'channelName3',
			label: 'checkBox选择器：',
			options: [
				{
					value: '3',
					label: '渠道名称3',
				},
			],
		},
		{
			componentType: 'cascader',
			key: 'channelName4',
			label: '级联选择器：',
			options: [
				{
					value: '4',
					label: '渠道名称4',
					children: [
						{
							value: '4-1',
							label: '渠道名称4-1',
						},
						{
							value: '4-2',
							label: '渠道名称4-2',
							children: [
								{
									value: '4-2-1',
									label: '渠道名称4-2-1',
								},
							],
						},
					],
				},
			],
		},
	];

	const searchParams = ref({});
	const searchConfig = ref({
		labelWidth: 105,
		handlerSearch({ params, type }) {
			/**
			 * params: 搜索项 绑定值
			 * type: 按钮类型 searchForm：搜索按钮  resetForm：重置按钮
			 */
			console.log(params, type);
		},
		handleChange(value, item) {
			/**
			 * 描述：componentType 为 select、select-v2、checkSelect、cascader 时生效，可用于操作 切换选项之后的逻辑
			 * value: 当前选中的值
			 * item: 当前配置项的信息
			 */
			const { key } = item;
			// if (key === "userIdType") {
			//   data.searchConfig.form.forEach((item) => {
			//     if (item.key === "teamUserId") {
			//       switch (value) {
			//         case "1":
			//           item.placeholder = "请输入代理人用户ID";
			//           break;
			//         case "2":
			//           item.placeholder = "请输入上一级UID";
			//           break;
			//       }
			//       data.tableConfig.searchParams.teamUserId = null;
			//     }
			//   });
			// }
		},
		// 配置表头内容
		formConfigList: searchForm,
	});
</script>
